<template>
  <div class="goods-list-container">
    <van-cell
      class="good-item"
      v-for="item in goodsList"
      :key="item.proid"
      @click="handleCellClick(item.proid)"
    >
      <div class="item-image">
        <img :src="item.img1" alt="" />
      </div>
      <div class="item-info ignore">
        <p class="item-intro van-multi-ellipsis--l2">
          {{ item.proname }}
        </p>
        <p class="item-price">
          ￥<span class="price-value">{{ item.originprice }}</span>
        </p>
      </div>
    </van-cell>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
defineProps<{
  goodsList: {
    proid: string
    img1: string
    proname: string
    originprice: string
    [propName: string]: any
  }[]
}>()
const router = useRouter()
const handleCellClick = (id: string): void => {
  router.push({ name: 'details', params: { id } })
}
</script>

<style lang="scss" scoped>
.goods-list-container {
  // background: orangered;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  // min-width: 320px;
  .good-item {
    width: 48%;
    margin: 8px 0;
    border-radius: 5px;
    overflow: hidden;
    // background: lightcyan;
    padding: 0;

    .item-image {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .ignore {
      p {
        margin: 0;
        padding: 0;
        text-align: left;
      }
      .item-intro {
        // height: 36px; /*no*/
        font-size: 13px; /*no*/
        line-height: 15px; /*no*/
        overflow: hidden;
        // 以下代码可以实现多行文本显示...
        // text-overflow: ellipsis;
        // overflow: hidden;
        // display: -webkit-box;
        // -webkit-line-clamp: 2;
        // -webkit-box-orient: vertical;
        // display: -moz-box;
        // -moz-line-clamp: 2;
        // -moz-box-orient: vertical;
        // word-wrap: break-word;
        // word-break: break-all;
        // white-space: normal;
      }
      .item-price {
        font-weight: bold;
        font-size: 12px;
        color: #ee0a24;
        margin: 5px 0;
        .price-value {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
